import { Example } from '../../components/Example'

# Markdown Reference [Features and syntax of Markdown in Vocs]

## Blockquote

To create a blockquote, add a `>` in front of a paragraph.

:::code-group

<div data-title="Preview">
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
</div>

```md [Markdown]
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 
```

:::

## Callouts

Callouts can be rendered using one of the following [directives](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444):

- `:::note`
- `:::info`
- `:::warning`
- `:::danger`
- `:::tip`
- `:::success`

::::code-group

<div data-title="Preview">
:::note
This is a note callout. [Link](https://google.com)
:::

:::info
This is an info callout. [Link](https://google.com)
:::

:::warning
This is a warning callout. [Link](https://google.com)
:::

:::danger
This is a danger callout. [Link](https://google.com)
:::

:::tip
This is a tip callout. [Link](https://google.com)
:::

:::success
This is a success callout. [Link](https://google.com)
:::

:::note
This is a callout with code.

```tsx
console.log('hello world')
```
:::
</div>

````md [Markdown]
:::note
This is a note callout. [Link](https://google.com)
:::

:::info
This is an info callout. [Link](https://google.com)
:::

:::warning
This is a warning callout. [Link](https://google.com)
:::

:::danger
This is a danger callout. [Link](https://google.com)
:::

:::tip
This is a tip callout. [Link](https://google.com)
:::

:::success
This is a success callout. [Link](https://google.com)
:::

````

::::

## Code Blocks

### Default

Code can be formatted into blocks using triple backticks (```). Optionally, you can specify the language of the code block for syntax highlighting.

::::code-group

<div data-title="Preview">
```js
console.log("hello world")
```
</div>

````md [Markdown]
```js
console.log("hello world")
```
````

::::

### Titles

Code blocks can have titles. The title can be specified in the code block "meta", after the triple backticks.

#### Preview

```bash [Terminal]
npm i vocs
```

#### Markdown

````md
```bash [Terminal]
npm i vocs
```
````

### Line focus

The `// [!code focus]` marker can be used to focus a line of code.

::::code-group

<div data-title="Preview">
```ts
// 1. Import modules.
import { createPublicClient, http } from 'viem' 
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action! // [!code focus]
const blockNumber = await client.getBlockNumber() // [!code focus]
```
</div>

````md [Markdown]
```ts 
// 1. Import modules.
import { createPublicClient, http } from 'viem' 
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action! // [\!code focus] // [!code hl]
const blockNumber = await client.getBlockNumber() // [\!code focus] // [!code hl]
```
````

::::

### Line highlights

The `// [!code hl]` marker can be used to highlight a line of code.

::::code-group

<div data-title="Preview">
```ts
type Example = string // [!code hl]
const example: Example = 'example'
```
</div>

````md [Markdown]
```ts 
type Example = string // [\!code hl] // [!code hl]
const example: Example = 'example'
```
````

::::

### Line numbers

The `showLineNumbers` meta key can be used to show the lines of code beside the pane.

::::code-group

<div data-title="Preview">
```ts showLineNumbers
// 1. Import modules.
import { createPublicClient, http } from 'viem' 
import { mainnet } from 'viem/chains' 

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({ 
  chain: mainnet, 
  transport: http(), 
}) 

// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
```
</div>

````md [Markdown]
```ts showLineNumbers // [!code hl]
// 1. Import modules.
import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
```
````

::::

### Twoslash

Vocs supports [TypeScript Twoslash](https://www.typescriptlang.org/dev/twoslash/) syntax. [Read more](/docs/guides/twoslash).

::::code-group

<div data-title="Preview">
```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(), // [!code hl]
//  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|



```
</div>

````md [Markdown]
```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase(),
//  ^?
}

todo.title = 'Hello'

Number.parseInt('123', 10)
//      ^|



```
````

::::

### Word focus

The `// [!code word]` marker can be used to focus words in code.

::::code-group

<div data-title="Preview">
```ts 
// 1. Import modules.
import { createPublicClient, http } from 'viem'
// [!code word:mainnet]
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
// [!code word:client]
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
```
</div>

````md [Markdown]
```ts 
// 1. Import modules.
import { createPublicClient, http } from 'viem'
// [\!code word:mainnet] // [!code hl]
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
// [\!code word:client] // [!code hl]
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action!
const blockNumber = await client.getBlockNumber()
```
````

::::

### Diffs

The `// [!code ++]` and `// [!code --]` markers can be used to show diffs in code.

::::code-group

<div data-title="Preview">
```ts
// 1. Import modules.
import { createPublicClient } from 'viem' // [!code --]
import { createPublicClient, http } from 'viem' // [!code ++]
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action! 
const blockNumber = await client.getBlockNumber()
```
</div>

````md [Markdown]
```ts
// 1. Import modules.
import { createPublicClient } from 'viem' // [\!code --] // [!code hl]
import { createPublicClient, http } from 'viem' // [\!code ++] // [!code hl]
import { mainnet } from 'viem/chains'

// 2. Set up your client with desired chain & transport.
const client = createPublicClient({
  chain: mainnet,
  transport: http(),
})

// 3. Consume an action! 
const blockNumber = await client.getBlockNumber()
```
````

::::

## Code Groups

Code groups can be rendered using the `:::code-group` [directive](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444).

#### Preview

:::code-group
```bash [npm]
npm i viem
```

```bash [pnpm]
pnpm i viem
```

```bash [bun]
bun i viem
```
:::

#### Markdown

````md
:::code-group

```bash [npm]
npm i viem
```

```bash [pnpm]
pnpm i viem
```

```bash [bun]
bun i viem
```

:::
````

:::tip[Tip]
The `":::"` syntax refers to the [Directives Syntax Proposal](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444).
:::

### HTML/React Previews

#### Preview

:::code-group

<div data-title="Preview">
  <Example />
</div>

```tsx [example.tsx]
<div>test</div>
```

:::


#### Markdown

````mdx
import { Example } from './components/Example'

:::code-group

<div data-title="Preview">
  <Example />
</div>

```tsx [example.tsx]
<div>test</div>
```

:::
````

## Details

:::::code-group

<div data-title="Preview">
:::details[See more]
gotcha!
:::

<div style={{ height: '16px' }} />

::::note
:::details
gotcha!
:::
::::

::::danger[Error]
An error occurred!

:::details[Stack trace]
gotcha!
:::
::::
</div>

```md [Markdown]
:::details[See more]
gotcha!
:::

::::note
:::details
gotcha!
:::
::::

::::danger[Error]
An error occurred!

:::details[Stack trace]
gotcha!
:::
::::
```

:::::

## Emphasis

:::code-group

<div data-title="Preview">
<p>Emphasis, aka italics, with *asterisks* or _underscores_.</p>

<p>Strong emphasis, aka bold, with **asterisks** or __underscores__.</p>

<p>Combined emphasis with **asterisks and _underscores_**.</p>

<p>Strikethrough uses two tildes. ~~Scratch this.~~</p>
</div>

```md [Markdown]
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~
```

:::

## Headings

Headings are rendered as `<h1>` to `<h6>` tags corresponding to the number of `#` characters in the heading.

```md
# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6
```

## Images

:::code-group

<div data-title="Preview">
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
</div>

```md [Markdown]
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
```

:::

## Inline Code

:::code-group

<div data-title="Preview">
<p>Inline `code` has `back-ticks around` it.</p>

<p>Inline [`code`]() with link.</p>

Inline `console.log("hello world"){:js}` highlighted code
</div>

```md [Markdown]
Inline `code` has `back-ticks around` it.

Inline [`code`]() with link.

Inline `console.log("hello world"){:js}` highlighted code
```

:::

## Links

:::code-group

<div data-title="Preview">
<p>[Internal link](/docs/api/config)</p>

<p>[External link](https://google.com)</p>

<p>www.example.com, https://example.com, and contact@example.com.</p>
</div>

```md [Markdown]
[Internal link](/docs/api/config)

[External link](https://google.com)

www.example.com, https://example.com, and contact@example.com.
```

:::

## Lists

:::code-group

<div data-title="Preview">
1. First ordered list item
2. Another item
    - Unordered sub-list.
      - Unordered sub-list.
        - Unordered sub-list.
      - Unordered sub-list.
    - Unordered sub-list.
    - Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
    1. Ordered sub-list
        1. Ordered sub-list
    2. Ordered sub-list
    3. Ordered sub-list
4. And another item.
</div>

```md [Markdown]
1. First ordered list item
2. Another item
    - Unordered sub-list.
      - Unordered sub-list.
        - Unordered sub-list.
      - Unordered sub-list.
    - Unordered sub-list.
    - Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
    1. Ordered sub-list
        1. Ordered sub-list
    2. Ordered sub-list
    3. Ordered sub-list
4. And another item.
```

:::

## Steps

#### Preview

::::steps
##### Step one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

##### Step two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

:::code-group
```tsx [console.log]
console.log('hello world')
```

```tsx [alert]
alert('hello world')
```
:::

:::info
test

```tsx
console.log('hi')
```
:::

##### Step three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
::::

#### Code

````md
::::steps
### Step one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

### Step two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.

:::code-group
```tsx [console.log]
console.log('hello world')
```

```tsx [alert]
alert('hello world')
```
:::

:::info
test
:::

### Step three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vestibulum ante non neque convallis tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam a iaculis libero.
::::
````

:::tip[Tip]
The `":::"` syntax refers to the [Directives Syntax Proposal](https://talk.commonmark.org/t/generic-directives-plugins-syntax/444).
:::

## Tables

#### Preview

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

#### Code

```md
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
```
